<template>
	<view class="content">
		<uni-section title="设备信息" type="line">
			<uni-forms ref="form" :value="form" labelWidth="140px" :border="border" class="bg-white margin-top-lg">
				<uni-forms-item name="deviceName" label="设备名称" class="margin-left margin-right" style="margin-top: 10px">
					<uni-easyinput type="text" confirmType="done" v-model="form.deviceName" placeholder="请输入设备名称" />
				</uni-forms-item>

				<uni-forms-item name="createTime" label="安装时间" :border="border" class="margin-left margin-right flexrowcenter">
					<uni-datetime-picker class="flexrowflexend" type="datetime" v-model="form.createTime" ref="pickerRef"></uni-datetime-picker>
				</uni-forms-item>
			</uni-forms>

			<uni-forms-item required name="sceneImg" class="bg-white margin-top">
				<template #label>
					<view class="flex align-center padding">
						<view class="text-black">现场照片</view>
					</view>
				</template>
				<view class="margin-right padding-lr-lg">
					<upload v-model="form.sceneImg"></upload>
				</view>
			</uni-forms-item>
			<!-- <uni-list-item title="现场照片">
					<template v-slot:footer>
						<view class="flexrowcenter">
							<image class="icon-pic" v-for=" (sceneImgurl,sceneImgindex) in sceneImg"
                     :key="sceneImgindex"
                     :src="sceneImgurl"
              />
							<image
                      src="@/static/images/common/morepic.png"
                      class="icon-small" style="margin-left: 20rpx;margin-right: 10rpx;"></image>
							<text class="text-sm text-blue ">更多</text>
						</view>
					</template>
				</uni-list-item> -->
		</uni-section>
		<uni-section title="建筑物" type="line" style="margin-top: 20rpx">
			<uni-list-item showArrow title="名称" :border="borderFalse" clickable @click="openBuildingSelect">
				<template v-slot:footer>
					<view class="flexrowcenter">
						<text class="text-sm text-blue">{{ form.formBuilding.buildingName || buildingResp.buildingName }}</text>
						<image class="icon-small" src="@/static/images/common/changebuild.png" style="margin-left: 20rpx; margin-right: 10rpx"></image>
						<text class="text-sm text-blue">切换</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="地址" :rightText="form.formBuilding.address || buildingResp.address" />
			<uni-list-item title="组织单位" :rightText="form.formBuilding.deptName || buildingResp.deptName" />
		</uni-section>

		<view class="button-container">
			<button class="button1" v-if="auth('thing:building-device:delete')" @click="updateDevice">保存</button>
		</view>
		<uni-popup ref="popup" :is-mask-click="true">
			<view class="popupcontent">
				<select-building />
			</view>
		</uni-popup>
	</view>
</template>

<script>
import config from '@/config';
import { getInstanceInfo } from '@/api/devices/index';
import dayjs from 'dayjs';
import authMixin from '@/mixin/auth.js';
import { updateDevice } from '@/api/devices/index';
export default {
	mixins: [authMixin],
	data() {
		return {
			border: false,
			borderFalse: false,
			form: {
				formBuilding: {},
				buildingId: null,
				deviceId: null,
				deviceName: null,
				createTime: null,
				sceneImg: null
			},
			query: {},
			sceneImg: [],
			buildingType: '',
			buildingResp: {},
			deviceInfoRes: {},
			productDO: {},
			dictMap: this.$store.state.dict.dictMap,
			inputtitle: '',
			inputdes: ''
		};
	},
	filters: {
		networkFlagDes(value) {
			return value === 1 ? '4G-DTU' : 'NB-IOT';
		}
	},
	onLoad(query) {
		console.log('query>>>', query);
		this.query = query;
		const { deviceId } = query || {};
		getInstanceInfo({ deviceId }).then((res) => {
			console.log('res>>', res);
			const data = res.data;
			const { buildingRespVO, deviceInfoRespVO, productDO } = data;
			this.buildingResp = buildingRespVO;
			this.deviceInfoRes = deviceInfoRespVO;
			this.productDO = productDO;
			console.log(' this.dictMap>>>', this.dictMap);

			this.form.deviceName = this.deviceInfoRes.deviceName;
			this.form.buildingId = this.buildingResp.id;
			this.form.deviceId = this.deviceInfoRes.id;

			this.form.createTime = this.dateFomatterYYYYMMDD(this.deviceInfoRes.createTime);
			this.form.sceneImg = deviceInfoRespVO.sceneImg;
		});

		const that = this;
		uni.$on('selected-building', function (item) {
			console.log('devices-add-item', item);
			that.form.formBuilding = item;
			that.$refs.popup.close();
			that.$forceUpdate();
		});
		uni.$on('imgUrls', function (imgUrls) {
			const urllist = imgUrls.urllist;
			that.sceneImgUrlList = urllist;
			console.log('监听到事件来自imgUrls', urllist);
			console.log('监听到事件来自urllist.join(', ')', urllist.join(','));
			that.form.sceneImg = urllist.join(',');
		});
	},
	onUnload() {
		uni.$off('selected-building');
		uni.$off('imgUrls');
	},
	methods: {
		openBuildingSelect() {
			this.checkedBuildingItem = null;
			this.$refs.popup.open('bottom');
		},
		dateFomatterYYYYMMDD(date) {
			return date ? dayjs(date).format('YYYY-MM-DD') : '';
		},

		updateDevice() {
			console.log('form>>>', this.form);
			uni.showLoading({
				title: '更新中...'
			});
			updateDevice({
				buildingId: this.form.formBuilding.id || this.form.buildingId,
				deviceId: this.form.deviceId,
				deviceName: this.form.deviceName,
				sceneImg: this.form.sceneImg
			})
				.then((res) => {
					uni.showToast({
						title: '更新成功'
					});
					setTimeout(() => {
						uni.navigateBack();
						uni.$emit('refresh-devices-details', true);
					}, 1000);
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		dicDes(value, type) {
			let label = '';
			const alarm_type = this.dictMap[type] || [];
			alarm_type.map((item) => {
				if (item.value == value) {
					label = item.label;
				}
			});
			return label;
		}
	}
};
</script>

<style>
page {
	height: 100%;
}

.content {
	background-color: #f5f6f7;
}

.icon-small {
	height: 30rpx;
	width: 30rpx;
}
.icon-pic {
	height: 70rpx;
	width: 70rpx;
	margin-left: 5rpx;
	margin-right: 5rpx;
}
.button-container {
	margin-bottom: 40px;
	margin-top: 40px;
	height: 50px;
}
.button1 {
	width: 700rpx;
	margin-right: 25rpx;
	margin-left: 25rpx;

	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	border-radius: 5px;
	color: #ffffff;
	background-color: #0081ff;
}
</style>
